<template>
	<view class="register">
		<view class="title">注册</view>
		<view class="username">
			<text class="text">联系方式</text>
			<input type="text" placeholder="请输入手机号码" class="input" v-model="username" />
		</view>
		<view class="username">
			<text class="text_none"></text>
			<input type="text" placeholder="请输入手机验证码" class="input" v-model="code" />
			<text class="countdown" v-if="codeStatus">{{ countdown }}</text>
			<text @click="clickCode" class="code">{{ codeContent }}</text>
		</view>
		<view class="username">
			<text class="text">登录密码</text>
			<input type="password" password placeholder="请输入8-11位有效字符" class="input" v-model="password" />
		</view>
		<view class="username">
			<text class="text texts">邀请码</text>
			<input placeholder="请输入邀请码----选填" class="input" v-model="invitationCode" />
		</view>

		<button class="register_button" @click="submitForm">注册</button>

		<view class="agreement">
			<checkbox-group @change="checked = !checked">
				<label>
					<checkbox :checked="checked" />我已阅读并接受
				</label>
			</checkbox-group>
			<text v-for="item in agreementList" :key="item.id" @click="protocol(item)">
				《{{item.title}}》
			</text>
		</view>

	</view>
</template>

<script>
	import {
		getAgreementList,
		getAgreementContent,
		submitRegistration,
		getCode
	} from '@/api/reg/index'
	import {
		bindWechat
	} from '@/api/login/wechat.js'

	export default {
		data() {
			return {
				username: '',
				code: '',
				password: '',
				invitationCode: '',
				countdown: 60,
				codeContent: '发送验证码',
				codeStatus: false,
				checked: false,
				agreementList: '',
			}
		},
		onShow() {
			getAgreementList().then(res => {
				this.agreementList = res.data
			})
		},
		methods: {
			protocol(e) {
				uni.navigateTo({
					url: `/pages_user/reg/protocol?id=${e.id}&title=${e.title}`
				})
			},
			clickCode() {
				getCode('REGISTER', this.username).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'none',
							title: res.data,
							mask: true
						})
						this.codeStatus = true
						this.codeContent = '秒'
						this.hasTimer()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data,
							mask: true
						})
					}
				})
			},
			// 定时器
			hasTimer() {
				setTimeout(() => {
					if (this.countdown > 1) {
						this.countdown--
						this.hasTimer()
					} else {
						this.codeStatus = false
						this.codeContent = '发送验证码'
					}
				}, 1000)
			},
			submitForm() {
				if (!this.checked) {
					uni.showToast({
						icon: 'none',
						title: '请勾选协议',
						mask: true
					})
					return
				}
				if (!this.username) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码',
						mask: true
					})
					return
				}
				if (!this.code) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机验证码',
						mask: true
					})
					return
				}
				if (!this.password) {
					uni.showToast({
						icon: 'none',
						title: '请输入登录密码',
						mask: true
					})
					return
				}

				submitRegistration({
					mobilePhone: this.username,
					code: this.code,
					password: this.password,
					invitationCode: this.invitationCode
				}).then(res => {
					if (res.code === 200) {
						uni.setStorageSync('token', res.data.accessToken)
						uni.showToast({
							icon: 'none',
							title: '注册成功',
							mask: true
						})
						// #ifdef MP-WEIXIN
						bindWechat()
						// #endif
						uni.navigateTo({
							url: `/pages_user/reg/enterpriseType`
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		padding-top: 58rpx;
	}

	.title {
		font-size: 33rpx;
		line-height: 1;
		font-weight: 500;
		margin-bottom: 47rpx;
		margin-left: 40rpx;
	}

	.username {
		display: flex;
		flex-flow: row nowrap;
		border-bottom: 1px solid #f9f9f9;
		padding: 41.67rpx 0;
		margin: 0 40rpx;

		.text_none,
		.text {
			width: 130rpx;
			font-size: 29rpx;
			font-weight: 400;
			margin-right: 54.17rpx;
		}

		.text::before {
			content: "*";
			color: #ef231b;
		}

		.texts::before {
			content: "*";
			color: #fff;
		}

		.input {
			font-size: 29rpx;
			font-weight: 400;
			color: #000000;
		}

		.input::placeholder {
			font-size: 29rpx;
			font-weight: 400;
			color: #000000;
			opacity: 0.4;
		}

		.code {
			max-width: 160rpx;
			font-size: 29rpx;
			font-weight: 400;
			color: #2871fc;
			white-space: nowrap;
			overflow: hidden;
			margin: 0;
		}

		.countdown {
			width: 38rpx;
			font-size: 29rpx;
			color: #ef231b;
			margin-left: 88rpx;
		}
	}

	.register_button {
		width: 667rpx;
		height: 72rpx;
		background: #2871fc;
		border-radius: 36rpx;
		color: #fff;
		font-size: 29rpx;
		margin-top: 154rpx;
		margin-bottom: 61rpx;
	}

	.agreement {
		font-size: 24rpx;
		font-weight: 400;
		margin-left: 42rpx;
		display: flex;
		align-items: center;

		text {
			color: #2871fc;
		}

		label {
			display: flex;
			align-items: center;
		}
	}
</style>